<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>编辑客栈资料-嗨柚</title>
    <link rel="stylesheet" type="text/css" href="../../css/share/reset.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/share/ui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/host/profile.css"/>
</head>

<body>
<!-- header-->
<div class="header">
    <div class="header-top">
        <div class="headerWrapper">
            <div class="header-top-left fl">
                您好,欢迎访问嗨柚旅行官方网站
            </div>
            <div class="header-top-right fr">
                <ul>
                    <li><a href="javascript:void(0);"><img src="../../img/header/header1.png" alt="手机版"/>手机版</a></li>
                    <li><a href="javascript:void(0);"
                           onClick="try { window.external.addFavorite('http://www.hiyouther.com', '嗨柚旅行'); }catch (e) { try {  window.sidebar.addPanel('嗨柚旅行', 'http://www.hiyouther.com' , '');}catch (e) {	alert('抱歉，您所使用的浏览器无法完成此操作(浏览器安全)。\n\n不如动动鼠标,手动收藏!\n\n么么哒!');}}">
                        <img src="../../img/header/header2.png" alt="加入收藏"/>加入收藏</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="header-content">
        <div class="headerWrapper">
            <div class="header-content-logo fl">
                <img src="../../img/header/logo.png" alt="logo"/>
            </div>
            <div class="header-content-nav fr">
                <ul>
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="me/index.html">个人中心</a></li>
                    <li><a href="host/index.html">我是商家</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><em></em><a href="javascript:void(0);">登录</a>&nbsp;&nbsp;&nbsp;<a
                            href="javascript:void(0);">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- /header -->

<div class="container-wrapper">
    <div class="container">
        <div class="box ">
            <div class="box-header ">
                <h1 class="title">编辑客栈资料 <a href="javascript:void(0)" class="btn fr n h-c-theme" id="history-btn">招聘历史</a><a
                        href="javascript:void(0)" class="btn fr n h-c-theme"  id="requests-btn">收到的简历</a></h1>
            </div>
            <div class="box-content edit-display">
                <form action="javascript:void(0);" method="post">
                    <table>
                        <colgroup>
                            <col style="width: 105px;"/>
                            <col style="width: auto;"/>
                        </colgroup>
                        <tbody>
                        <tr>
                            <th>客栈名称<span>:</span></th>
                            <td><input type="text" name="hostname" id="hostname" value="拾光旅社" class="e-s disabled"/></td>
                        </tr>
                        <tr>
                            <th>客栈地区<span>:</span></th>
                            <td><select name="province" id="province" class="e-s disabled">

                            </select>
                                <select name="city" id="city" class="e-s disabled">

                                </select>
                            </td>
                        </tr>
                        <tr>
                            <th>详细地址<span>:</span></th>
                            <td><input type="text" name="" id="location" value="lalalla" class="e-s disabled"/></td>
                        </tr>
                        <tr>
                            <th class="vab">客栈简介<span>:</span></th>
                            <td><textarea name="slogan" id="slogan" rows="10" cols="90" maxlength="a200" class="e-s disabled" placeholder="随便写点什么让大家认识你吧!"></textarea></td>
                        </tr>
                        <tr>
                            <th>通过认证<span>:</span></th>
                            <td>
                                <!--没有通过的图片颜色取gray后缀的-->
                                <p class="renzhen"><img src="../../img/icons/idcardCi.png" class="vam" alt="身份认证">已通过身份认证<img
                                        src="../../img/icons/storeCiGray.png" class="vam" alt="店铺认证">未通过店铺认证 <a
                                        href="javascript:void(0)" class="btn btn-warn" id="to-identifi">我要认证</a></p>
                            </td>
                        </tr>
                        <tr>
                            <th class="vab">客栈展示<span>:</span></th>
                            <td>
                                <ul class="photo-list fix">
                                    <li>
                                        <img class="vhide" src="" alt="展示图片"><a title="点击添加图片"
                                            href="javascript:void(0);">+</a><input
                                            type="file" hidden>
                                        <p><span class="fl">重选</span><span class="fr">删除</span></p>
                                    </li>
                                    <li>
                                        <img src="" class="vhide" alt="展示图片"><a title="点击添加图片"
                                            href="javascript:void(0);">+</a><input
                                            type="file" hidden>
                                        <p><span class="fl">重选</span><span class="fr">删除</span></p>
                                    </li>
                                    <li>
                                        <img src="" class="vhide" alt="展示图片"><a title="点击添加图片"
                                            href="javascript:void(0);">+</a><input
                                            type="file" hidden>
                                        <p><span class="fl">重选</span><span class="fr">删除</span></p>
                                    </li>
                                    <li>
                                        <img src="" class="vhide" alt="展示图片"><a title="点击添加图片"
                                            href="javascript:void(0);">+</a><input
                                            type="file" hidden>
                                        <p><span class="fl">重选</span><span class="fr">删除</span></p>
                                    </li>
                                    <li>
                                        <img src="" class="vhide" alt="展示图片"><a title="点击添加图片"
                                            href="javascript:void(0);">+</a><input
                                            type="file" hidden>
                                        <p><span class="fl">重选</span><span class="fr">删除</span></p>
                                    </li>
                                </ul>
                            </td>
                        </tr>
                        <tr>
                            <th class="vab">客栈标签<span>:</span></th>
                            <td class="clear-fix">
                                <p class="text-orange">注意:最多支持8个标签!</p>
                                <ul class="labels">
                                    <li><a class="t tag-theme">桌游爱好者</a></li>
                                    <li><a class="t tag-theme-b">猫星人</a></li>
                                    <li><a class="t tag-pink">桌游爱好者</a></li>
                                    <li><a class="t tag-pink-b">安静</a></li>
                                    <li><a class="t tag-theme">啤酒达人</a></li>
                                    <li><a class="t tag-green">包吃包聊</a></li>
                                    <li><a class="t tag-theme-b">GAY啊</a></li>
                                    <li><a class="t tag-theme">啤酒达人</a></li>
                                    <li><a class="t tag-pink-b">背包客</a></li>
                                    <li><a class="t tag-pink">安静每一天</a></li>
                                    <li><a class="t tag-theme">夜嗨</a></li>
                                </ul>


                                   <input type="text" id="new-tag" class="hide" placeholder="输入自定义标签(回车添加)"><a
                                       href="javascript:void(0);" class="btn btn-primary hide" id="new-tag-btn">新增</a>

                                <p>没有合适的?快来自定义客栈标签吧!</p>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                    <a href="javascript:void(0);"id="recruit-edit-btn" class="btn btn-primary ">编辑</a>
                    <div class="option hide">
                        <p><a href="javascript:void(0);" class="btn btn-neg" id="recruit-cancel-btn">取消</a><a href="javascript:void(0);" class="btn btn-primary" id="recruit-save-btn">保存</a><a href="javascript:void(0);" class="btn btn-warn" id="recruit-plus-btn">保存并发布招聘</a></p>
                    </div>

                </form>


            </div>
        </div>

    </div>
</div>

<!-- toolbor -->
<div class="toolbar">
    <a href="../contact.html">联系我们</a>
    <a class="weixin" href="javascript:void(0);"><span></span><img src="../../img/footer/weixinIcon.png"
                                                                   alt="微信图标"/><img
            class="erweima" src="../../img/footer/8cmerweima.jpg" alt="微信公众号二维码"/></a>
    <a id="scrollTop" href="javascript:void(0);"><img src="../../img/footer/top-archer.png" alt="TOP箭头"/><br/>TOP</a>
</div>
<!-- /toolbor -->
<!-- footer-->
<div class="footer">
    <div class="footer-content">
        <div class="footerWrapper">
            <div class="footer-content-text ">
                <ul>
                    <li>
                        <h2>快速导航</h2>
                        <p><a href="javascript:void(0);">个人中心</a></p>
                        <p><a href="javascript:void(0);">店家中心</a></p>
                        <p><a href="javascript:void(0);">友情链接</a></p>
                    </li>
                    <li>
                        <h2>帮助中心</h2>
                        <p><a href="javascript:void(0);">常见问题</a></p>
                        <p><a href="javascript:void(0);">用户协议</a></p>
                        <p><a href="javascript:void(0);">免责声明</a></p>
                        <p><a href="javascript:void(0);">版权声明</a></p>
                    </li>
                    <li>
                        <h2>反馈</h2>
                        <p><a href="javascript:void(0);">意见建议</a></p>
                        <p><a href="javascript:void(0);">举报</a></p>
                    </li>
                </ul>
            </div>
            <div class="footer-content-conact">
                <ul>
                    <li>
                        <img src="../../img/footer/footer1.png" alt="微博图标"/>
                        <p>嗨柚旅行微博</p>
                        <a href="javascript:void(0)" title="点击关注我们的微博"><img src="../../img/footer/footer2.png"
                                                                            alt="微博图标"/></a>
                    </li>
                    <li>
                        <img class="erweima" src="../../img/footer/qqerwei.jpg" alt="QQ二维码"/>
                        <p>客服QQ</p>
                        <p>2922128492</p>
                    </li>
                    <li>
                        <img class="erweima" src="../../img/footer/qqgroup.jpg" alt="QQ群二维码"/>
                        <p>嗨柚QQ群</p>
                        <p>327843540</p>
                    </li>
                    <li>
                        <img class="erweima" src="../../img/footer/8cmerweima.jpg" alt="微信公众号二维码"/>
                        <p>嗨柚微信公众号</p>
                        <p>HiYouth</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <p>Copyright&copy;2015-2016 hiyouther.com All Rights Reserved</p>
        <p><a href="http://www.miitbeian.gov.cn" title="http://www.miitbeian.gov.cn">渝ICP备16003213号-1</a></p>
    </div>
</div>
<!-- /footer -->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../js/lib/jquery-1.11.3.min.js"></script>
<script>
    
    
    //绑定顶部的历史和收到的简历按钮的事件绑定
    $("#history-btn").click(function () {
        alert("跳往招聘历史")
    });
    $("#requests-btn").click(function () {
        alert("前往收到的简历")
    });
    $("#to-identifi").click(function () {
        alert("前往认证")
        window.href = "../identification.html";
    })


    //editor
    //需要操作的地方就在每个editor的save和cancel函数里面
    profile_editor();//执行函数体
    function profile_editor() {
        var editor = {
            edit_btn: $("#recruit-edit-btn"),
            save_btn: $("#recruit-save-btn"),
            cancel_btn: $("#recruit-cancel-btn"),
            plus_btn:$("#recruit-plus-btn"),
            edit: edit,
            save: save,
            cancel: cancel,
            get_data: get_data,
            reset: reset //删除事件 恢复最初的状态
        };
        var tag = {
            new_btn: $("#new-tag-btn"),
            new_tag_input: $("#new-tag"),
            on: function () {
                $(".t").click(function () {
                    var names = $(this).get(0).className.split(" ");
                    for (var i = 0, j = names.length; i < j; i++) {
                        if (names[i].substr(0, 3) == "tag") {
                            if (names[i].substr(-2, 2) != "-b") {
                                //没有边框的,修改为有边框
                                $(this).addClass(names[i] + "-b");
                                $(this).removeClass(names[i]);
                            } else {
                                //有边框,修改为无边框
                                var length = names[i].length;
                                $(this).addClass(names[i].substr(0, length - 2));
                                $(this).removeClass(names[i]);
                            }
                        }
                    }
                });
                this.new_tag_input.keydown(function (e) {
                    if (e.keyCode == 13) {
                        tag.new_tag();
                    }
                });
            },
            off: function () {
                $(".t").off("click");
                this.new_tag_input.off();
            },
            new_tag: function () {
                var name = this.new_tag_input.val();
                var a = document.createElement("a");
                var li = document.createElement("li");

                if (name == "")return;
                this.new_tag_input.val("");
                var namespace = ["tag-theme", "tag-pink", "tag-yellow", "tag-red", "tag-green"];
                var len = namespace.length;
                var random = Math.floor(Math.random() * len);
                //随机分配tag名称

                a.className = "t " + namespace[random];
                a.innerHTML = name;
                li.appendChild(a);
                $(".labels").append(li);
                tag.off();
                tag.on();
            },
            get_tags: function () {
                var $alist = $(".labels a").not($("a[class$='-b']"));
                var obj = {
                    text: [],
                    class: []
                };
                $alist.each(function (index, el) {
                    obj.class.push(el.className);
                    obj.text.push(el.innerHTML);
                });
                return obj;
            }
        };
        editor.reset();//初始化
        function reset() {
            editor.edit_btn.removeClass("disabled");
            editor.edit_btn.one("click", function () {
                        tag.new_btn.removeClass("hide");
                        tag.new_btn.one("click", function () {
                            tag.new_tag_input.fadeIn();
                            tag.new_btn.click(function () {
                                tag.new_tag()
                            })
                        });

                        editor.edit();
                    }
            );
            tag.off();
            tag.new_btn.addClass("hide").off();
            $(".edit-display .e-s").addClass("disabled");
            $(".option").slideUp();
            tag.new_tag_input.hide();
            editor.save_btn.off();
            editor.cancel_btn.off();
            editor.plus_btn.off();
        }

        function edit() {
            //设置显示
            this.edit_btn.addClass("disabled");
            $(".e-s").removeClass("disabled");
            $(".option").slideDown();
            editor.save_btn.on("click", function () {
                        editor.save();
                    }
            );
            editor.cancel_btn.on("click", function () {
                        editor.cancel();
                    }
            );
            editor.plus_btn.click(function(){
                //执行保存
                    editor.save();
                alert("跳转到发布招聘页面");
                throw "在这里跳转到发布招聘";

            })

            //添加标签有关的事件
            tag.on();
        }

        function save() {
            $(".profile-edit .e-s").addClass("disabled");
            this.edit_btn.removeClass("disabled");
            if ("成功" == "成功") {
                var data = this.get_data();

                console.log(data);
                console.log(tag.get_tags());

                editor.reset();
            }
        }

        function get_data() {
            var obj = {};

            obj.hostnamename = $("#hostname").val();
            obj.province = $("#province").val();
            obj.city = $("#city").val();
            obj.location = $("#location").val();
            obj.labels = tag.get_tags();
            obj.slogan = $("#slogan").val();
            return obj;
        }

        function cancel() {
            //再次渲染一次页面.
            editor.reset()
        }
    }


    //图片上传
    $(".photo-list").on("click", "li>a,p>span", function (e) {

        if (e.currentTarget.tagName.toLowerCase() == "span") {

            if (e.currentTarget.innerHTML == "重选") {
                $(e.target).parent().parent().find("input").click();
            } else {
                //删除;
                var $li = $(e.target).parent().parent();
                $li.find("img").addClass("vhide");
                $li.find("img").attr("src", "");
                $li.find("a").removeClass("hide");
                $li.find("input").val("");
            }
        } else {
            $(e.target).parent().find("input").click();
        }
    });

    $(".photo-list input").each(function (index, el) {
        $(el).on("change", function (e) {
            console.log("change")
            try {
                var file = e.target.files[0];
            } catch (e) {
                alert("您的浏览器不支持及时预览!");
                throw  "不支持HTML5 FILE API"
                return false;
            }
            var fileReader = new FileReader();
//        fileReader.readAsDataURL(file);
//        var url = fileReader.result;
            var $a = $(e.target).prev();
            fileReader.onload = function (evt) {
                $a.prev().get(0).src = evt.target.result;
            }
            fileReader.readAsDataURL(file);
            window.f = fileReader;
            $a.addClass("hide");
            $a.prev().removeClass("vhide");
        })
    })

    //返回顶部
    $(function () {
        $(window).scroll(function () {
            if ($(document).scrollTop() > 200) {
                $(".toolbar").fadeIn();
            } else {
                $(".toolbar").fadeOut();
            }
        });
        $("#scrollTop").click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });
    
    
</script>
<script type="text/javascript">
    //省份二级联动原生js 初始化在下面调用的initSelect("重庆市","南岸区")//若无参数就是默认的北京北京
    var list1 = [];
    var list2 = [];
    list1[list1.length] = "北京市";
    list1[list1.length] = "天津市";
    list1[list1.length] = "河北省";
    list1[list1.length] = "山西省";
    list1[list1.length] = "内蒙古";
    list1[list1.length] = "辽宁省";
    list1[list1.length] = "吉林省";
    list1[list1.length] = "黑龙江省";
    list1[list1.length] = "上海市";
    list1[list1.length] = "江苏省";
    list1[list1.length] = "浙江省";
    list1[list1.length] = "安徽省";
    list1[list1.length] = "福建省";
    list1[list1.length] = "江西省";
    list1[list1.length] = "山东省";
    list1[list1.length] = "河南省";
    list1[list1.length] = "湖北省";
    list1[list1.length] = "湖南省";
    list1[list1.length] = "广东省";
    list1[list1.length] = "广西自治区";
    list1[list1.length] = "海南省";
    list1[list1.length] = "重庆市";
    list1[list1.length] = "四川省";
    list1[list1.length] = "贵州省";
    list1[list1.length] = "云南省";
    list1[list1.length] = "西藏自治区";
    list1[list1.length] = "陕西省";
    list1[list1.length] = "甘肃省";
    list1[list1.length] = "青海省";
    list1[list1.length] = "宁夏回族自治区";
    list1[list1.length] = "新疆维吾尔自治区";
    list1[list1.length] = "香港特别行政区";
    list1[list1.length] = "澳门特别行政区";
    list1[list1.length] = "台湾省";
    list1[list1.length] = "其它";

    list2[list2.length] = ["北京", "东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", " 海淀区（中关村）", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", " 其他"];
    list2[list2.length] = ["和平区", "河东区", "河西区", "南开区", "红桥区", "塘沽区", "汉沽区", "大港区",
        "西青区", "津南区", "武清区", "蓟县", "宁河县", "静海县", "其他"];
    list2[list2.length] = ["石家庄市", "张家口市", "承德市", "秦皇岛市", "唐山市", "廊坊市", "衡水市",
        "沧州市", "邢台市", "邯郸市", "保定市", "其他"];
    list2[list2.length] = ["太原市", "朔州市", "大同市", "长治市", "晋城市", "忻州市", "晋中市", "临汾市",
        "吕梁市", "运城市", "其他"];
    list2[list2.length] = ["呼和浩特市", "包头市", "赤峰市", "呼伦贝尔市", "鄂尔多斯市", "乌兰察布市",
        "巴彦淖尔市", "兴安盟", "阿拉善盟", "锡林郭勒盟", "其他"];
    list2[list2.length] = ["沈阳市", "朝阳市", "阜新市", "铁岭市", "抚顺市", "丹东市", "本溪市", "辽阳市",
        "鞍山市", "大连市", "营口市", "盘锦市", "锦州市", "葫芦岛市", "其他"];
    list2[list2.length] = ["长春市", "白城市", "吉林市", "四平市", "辽源市", "通化市", "白山市", "延边朝鲜族自治州", "其他"];
    list2[list2.length] = ["哈尔滨市", "七台河市", "黑河市", "大庆市", "齐齐哈尔市", "伊春市", "佳木斯市",
        "双鸭山市", "鸡西市", "大兴安岭地区(加格达奇)", "牡丹江", "鹤岗市", "绥化市　", "其他"];
    list2[list2.length] = ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "普陀区", "闸北区", "虹口区",
        "杨浦区", "闵行区", "宝山区", "嘉定区", "浦东新区", "金山区", "松江区", "青浦区", "南汇区", "奉贤区", "崇明县", "其他"];
    list2[list2.length] = ["南京市", "徐州市", "连云港市", "宿迁市", "淮安市", "盐城市", "扬州市", "泰州市",
        "南通市", "镇江市", "常州市", "无锡市", "苏州市", "其他"];
    list2[list2.length] = ["杭州市", "湖州市", "嘉兴市", "舟山市", "宁波市", "绍兴市", "衢州市", "金华市",
        "台州市", "温州市", "丽水市", "其他"];
    list2[list2.length] = ["合肥市", "宿州市", "淮北市", "亳州市", "阜阳市", "蚌埠市", "淮南市", "滁州市",
        "马鞍山市", "芜湖市", "铜陵市", "安庆市", "黄山市", "六安市", "巢湖市", "池州市", "宣城市", "其他"];
    list2[list2.length] = ["福州市", "南平市", "莆田市", "三明市", "泉州市", "厦门市", "漳州市", "龙岩市", "宁德市", "其他"];
    list2[list2.length] = ["南昌市", "九江市", "景德镇市", "鹰潭市", "新余市", "萍乡市", "赣州市", "上饶市",
        "抚州市", "宜春市", "吉安市", "其他"];
    list2[list2.length] = ["济南市", "聊城市", "德州市", "东营市", "淄博市", "潍坊市", "烟台市", "威海市",
        "青岛市", "日照市", "临沂市", "枣庄市", "济宁市", "泰安市", "莱芜市", "滨州市", "菏泽市", "其他"];
    list2[list2.length] = ["郑州市", "三门峡市", "洛阳市", "焦作市", "新乡市", "鹤壁市", "安阳市", "濮阳市",
        "开封市", "商丘市", "许昌市", "漯河市", "平顶山市", "南阳市", "信阳市", "周口市", "驻马店市", "其他"];
    list2[list2.length] = ["武汉市", "十堰市", "襄樊市", "荆门市", "孝感市", "黄冈市", "鄂州市", "黄石市",
        "咸宁市", "荆州市", "宜昌市", "随州市", "恩施土家族苗族自治州", "仙桃市", "天门市", "潜江市", "神农架林区", "其他"];
    list2[list2.length] = ["长沙市", "张家界市", "常德市", "益阳市", "岳阳市", "株洲市", "湘潭市", "衡阳市",
        "郴州市", "永州市", "邵阳市", "怀化市", "娄底市", "湘西土家族苗族自治州", "其他"];
    list2[list2.length] = ["广州市", "清远市市", "韶关市", "河源市", "梅州市", "潮州市", "汕头市", "揭阳市",
        "汕尾市", " 惠州市", "东莞市", "深圳市", "珠海市", "中山市", "江门市", "佛山市", "肇庆市", "云浮市",
        "阳江市", "茂名市", "湛江市", " 其他"];
    list2[list2.length] = ["南宁市", "桂林市", "柳州市", "梧州市", "贵港市", "玉林市", "钦州市", "北海市",
        "防城港市", "崇左市", "百色市", "河池市", "来宾市", "贺州市", "其他"];
    list2[list2.length] = ["海口市", "三亚市", "其他"];
    list2[list2.length] = ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区",
        "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川市",
        "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "璧山县", "垫江县", "武隆县", "丰都县",
        "城口县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县",
        "酉阳土家族苗族自治县", "秀山土家族苗族自治县", "其他"];
    list2[list2.length] = ["成都市", "广元市", "绵阳市", "德阳市", "南充市", "广安市", "遂宁市",
        "内江市", "乐山市", "自贡市", "泸州市", "宜宾市", "攀枝花市", "巴中市", "资阳市", "眉山市", "雅安",
        "阿坝藏族羌族自治州", "甘孜藏族自治州", "凉山彝族自治州县", "其他"];
    list2[list2.length] = ["贵阳市", "六盘水市", "遵义市", "安顺市", "毕节地区", "铜仁地区",
        "黔东南苗族侗族自治州", "黔南布依族苗族自治州", "黔西南布依族苗族自治州", "其他"];
    list2[list2.length] = ["昆明市", "曲靖市", "玉溪市", "保山市", "昭通市", "丽江市", "普洱市",
        "临沧市", "宁德市", "德宏傣族景颇族自治州", "怒江傈僳族自治州", "楚雄彝族自治州", "红河哈尼族彝族自治州",
        "文山壮族苗族自治州", "大理白族自治州", "迪庆藏族自治州", "西双版纳傣族自治州", "其他"];
    list2[list2.length] = ["拉萨市", "那曲地区", "昌都地区", "林芝地区", "山南地区", "日喀则地区", "阿里地区", "其他"];
    list2[list2.length] = ["西安市", "延安市", "铜川市", "渭南市", "咸阳市", "宝鸡市", "汉中市", "安康市", "商洛市", "其他"];
    list2[list2.length] = ["兰州市 ", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "酒泉市",
        "张掖市", "庆阳市", "平凉市", "定西市", "陇南市", "临夏回族自治州", "甘南藏族自治州", "其他"];
    list2[list2.length] = ["西宁市", "海东地区", "海北藏族自治州", "黄南藏族自治州", "玉树藏族自治州",
        "海南藏族自治州", "果洛藏族自治州", "海西蒙古族藏族自治州", "其他"];
    list2[list2.length] = ["银川市", "石嘴山市", "吴忠市", "固原市", "中卫市", "其他"];
    list2[list2.length] = ["乌鲁木齐市", "克拉玛依市", "喀什地区", "阿克苏地区", "和田地区", "吐鲁番地区",
        "哈密地区", "塔城地区", "阿勒泰地区", "克孜勒苏柯尔克孜自治州", "博尔塔拉蒙古自治州",
        "昌吉回族自治州伊犁哈萨克自治州", "巴音郭楞蒙古自治州", "河子市", "阿拉尔市", "五家渠市", "图木舒克市", "其他"];
    list2[list2.length] = ["香港", "其他"];
    list2[list2.length] = ["澳门", "其他"];
    list2[list2.length] = ["台湾", "其他"];

    var ddlProvince = document.getElementById("province");
    var ddlCity = document.getElementById("city");
    ddlProvince.onchange = function (e) {
        selectprovince(e.target)
    }
    //   eg: initSelect("重庆市","南岸区");
    initSelect();
    function initSelect(pvovince, city) {
        var p_frag = document.createDocumentFragment();
        var book = 0;
        for (var i = 0, p_length = list1.length; i < p_length; i++) {
            var option = document.createElement("option");
            option.appendChild(document.createTextNode(list1[i]));
            option.value = list1[i];
            if (option.value == pvovince) {
                option.selected = true;
                book = i;
            }
            p_frag.appendChild(option);
        }
        ddlProvince.appendChild(p_frag);
        p_frag = null;

        var initprovince = list2[book];
        var fp_frag = document.createDocumentFragment();
        for (var j = 0, fp_length = initprovince.length; j < fp_length; j++) {
            var optioncity = document.createElement("option");
            optioncity.appendChild(document.createTextNode(initprovince[j]));
            optioncity.value = initprovince[j];
            if (optioncity.value == city) {
                optioncity.selected = true;
            }
            fp_frag.appendChild(optioncity);
        }
        ddlCity.appendChild(fp_frag);
        fp_frag = null;

    }
    function indexof(obj, value) {

        for (var k = 0, length = obj.length; k < length; k++) {
            if (obj[k] == value)
                return k;
        }
        return k;
    }

    function selectprovince(obj) {
        ddlCity.options.length = 0;//clear
        var index = indexof(list1, obj.value);
        var list2element = list2[index];
        var frag = document.createDocumentFragment();
        for (var i = 0, li2_length = list2element.length; i < li2_length; i++) {
            var option = document.createElement("option");
            option.appendChild(document.createTextNode(list2element[i]));
            option.value = list2element[i];
            frag.appendChild(option);
        }
        ddlCity.appendChild(frag)
    }
</script>

</body>

</html>